<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 800px;
            height: 500px;
            border: 1px solid #333;

            /* 设置为网格布局 */
            display: grid;

            /* 
                 网格的列宽
             */
            /* grid-template-columns: 100px 300px 100px; */
            /* grid-template-columns: 20% 30% 50%; */
            /* auto关键字：表示自动 */
            /* grid-template-columns: 100px auto 100px; */
            /* fr关键字：表示比例关系 */
            /* grid-template-columns: 1fr 1fr 1fr; */
            /* repeat()函数，包含多个重复的值时使用，接收两个参数，第一个表示重复的次数，第二个表示重复的模式 */
            grid-template-columns: repeat(4,100px);
            /* auto-fill关键字：表示自动填充，直到容器不能放置更多的列 */
            /* grid-template-columns: repeat(auto-fill,100px); */

            /* 
                网格的行高
            */
            /* grid-template-rows: 100px 100px 100px; */
            /* grid-template-rows: 1fr 2fr 1fr; */
            grid-template-rows: repeat(3,100px) 100px;

            /* 
                列间距
            */
            /* grid-column-gap: 10px; */

            /* 
                行间距
            */
            /* grid-row-gap: 10px; */

            /* 
                单元格内容的水平对齐
            */
            /* justify-items: stretch; */

            /* 
                单元格内容的垂直对齐
            */
            /* align-items: stretch; */

            /* 
                整个网格在容器中的水平对齐
            */
            /* justify-content: space-evenly; */

            /* 
                整个网格在容器中的垂直对齐
            */
            /* align-content: space-evenly; */

            /* 
                自动放置元素的顺序
            */
            /* grid-auto-flow: column; */

        }

        .container div{
            border: 1px solid red;
            text-align: center;
            line-height: 100px;
        }
        .d1{
            /* 列的开始和结束 */
            /* grid-column-start: 1;
            grid-column-end: 3; */
            grid-column: 1/3;

            /* 行的开始和结束 */
            grid-row: 1/3;
        }
        .d2{
            grid-row: 1/4;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="d1">01</div>
        <div class="d2">02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
        <div>07</div>
        <div>08</div>
        <div>09</div>
    </div>
</body>
</html>